{% extends "system_setup/base.html" %}

{% block page_link %}
    <script src="../../static/system_setup/js/set_up.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">

{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
    </style>

{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="set_up.html" style="color: #0b0b0b;">
                <i class="iconfont icon-gangweiguanli"></i>
                <span> 岗位设置</span>
            </a>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;margin-right: 2%;">
            <button onclick="Confirm_delete()" data-toggle="modal" data-target=".bd-example-modal-sm" style="height: 30px;width: 90%" type="button" class="btn btn-danger add-station1">删除</button>
        </div>

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%" data-toggle="modal" data-target=".bd-example-modal-xl" id="add_station" type="button" class="btn btn-default add-station">新增</button>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 95%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 150%;">
                <thead>
                    <tr>
                        <th scope="col" style="width: 3%;">
                            <input type="checkbox" onclick="check_all_not()" id="check_all">
                        </th>
                        <th scope="col" style="width: 8%;">所属部门</th>
                        <th scope="col" style="width: 8%;">岗位编号</th>
                        <th scope="col" style="width: 8%;">岗位名称</th>
                        <th scope="col" style="width: 8%;">岗位类别</th>
                        <th scope="col" style="width: 30%;">岗位职责</th>
                        <th scope="col" style="width: 30%;">岗位描述</th>
                    </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table"></tbody>
            </table>
            <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                <div style="margin-top: 10%;">
                    <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                    <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                </div>
            </div>
        </div>
        <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
    </div>

    <div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"   aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"  style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">新增岗位</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 450px;overflow: auto;">
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;">*</span>
                        <label for=""> 所属部门</label>
                        <input onblur="check_val(this.id, this.placeholder)" onclick="delete_val()" id="parent" class="form-control section-input" type="text" placeholder=" 所属部门" disabled>
                        <span data-toggle="modal" data-target=".bd-example-modal-xl1" onclick="delete_val()"><a href="#" style="font-size: 10px;">选择</a></span>
                    </div>
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;visibility: hidden;">*</span>
                        <label for=""> 岗位编号</label>
                        <input onblur="check_val(this.id, this.placeholder)" id="stationNum" class="form-control section-input" type="text" placeholder=" 岗位编号">
                    </div>
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;">*</span>
                        <label for=""> 岗位名称</label>
                        <input onblur="check_val(this.id, this.placeholder)" id="stationName" class="form-control section-input" type="text" placeholder=" 岗位名称">
                    </div>
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;">*</span>
                        <label for=""> 岗位类别</label>
                        <select id="category" class="form-control section-input">
                            <option>高层</option>
                            <option>中层</option>
                            <option>职工</option>
                        </select>
                    </div>
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;visibility: hidden;">*</span>
                        <label for="" style="vertical-align: middle;"> 岗位职责</label>
                        <textarea name="" id="position_statement" cols="30" rows="5" style="vertical-align: middle;width: 60%;border-color: #E8E8E8;"></textarea>
                    </div>
                    <div style="margin-top: 3%;margin-left: 5%;">
                        <span style="color: red;visibility: hidden;">*</span>
                        <label for="" style="vertical-align: middle;"> 岗位描述</label>
                        <textarea name="" id="job_description" cols="30" rows="5" style="vertical-align: middle;width: 60%;border-color: #E8E8E8;"></textarea>
                    </div>
                    <div style="height: 10%;"></div>
                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-close" type="button" class="btn btn-secondary" data-dismiss="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关&nbsp;闭&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    <button id="model-affirm" type="button" class="btn btn-primary" style="margin-left: 2%;margin-right: 2%;" onclick="submit_data()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade bd-example-modal-xl1" tabindex="-1" role="dialog"   aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"  style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 class="modal-title" style="line-height: 50px;width: 10%;">选择上级部门</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"  style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 450px;">
                    <div style="display: inline-block;width: 30%;height: 70%;margin-left: 1%;border-right: #E8E8E8 solid 1px;overflow: auto;">
                        <ul id="treeDemo1" class="ztree"></ul>
                    </div>
                    <div style="display: inline-block;width: 67.5%;height: 70%;overflow: auto;">
                        <div style="width: 100%;height: 35px;text-align: right;line-height: 40px;">
                            <input id="checkboxID" type="checkbox" style="vertical-align:middle; margin-top:-2px;" onclick="check_input()"> <span>显示所有下级部门</span>
                        </div>
                        <div id="Ztree-label">

                        </div>
                    </div>
                    <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;">
                        <div id="checked-label" style="margin-top: 1%;margin-left: 3%;">

                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button id="model-close1" type="button" class="btn btn-secondary" data-dismiss="modal">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关&nbsp;闭&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    <button id="model-affirm1" type="button" class="btn btn-primary" style="margin-left: 2%;margin-right: 2%;" onclick="summit_val()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </div>

    <!--确认删除？-->
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 10%;">
            <div class="modal-content" style="height: 150px;border-radius: 7px;width: 300px;background: #F8F8FF;border: #1E90FF solid 1px;">
                <div class="modal-header" style="height: 40px;background: #1E90FF;border-top-left-radius: 7px;border-top-right-radius: 7px;">
                    <h5 class="modal-title" style="line-height: 40px;width: 40%;text-align: center;color: #ffffff;">
                        提示对话框
                    </h5>
                    <button id="close-model2" type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 3%;line-height: 40px;">
                        <span aria-hidden="true" style="font-size: 28px;color: white;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 50px;line-height: 60px;text-align: center;">
                    <p id="Confirm-content" ></p>
                </div>
                <div class="modal-footer" style="height: 40px;">
                    <button type="button" class="btn btn-primary" style="margin-left: 2%;margin-right: 2%;background: #1E90FF;" onclick="delete_data()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/public_file/js/jquery.min.js"></script>
    <script src="../../static/system_setup/js/jquery.ztree.all.min.js"></script>
    <script src="../../static/system_setup/js/django.ajax.post.csrf.js"></script>
{% endblock %}
